<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地区查询</title>

    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        window.addEventListener('load', function () {
            // 获取输入的省份和城市、按钮
            var button = document.querySelector('.look').addEventListener('click', function () {
                var city = document.querySelector('.cityInput').value
                var province = document.querySelector('.provinceInput').value

                // 基于axios请求地区列表数据
                axios({
                    url: 'http://hmajax.itheima.net/api/area',
                    params: {
                        pname: province,
                        cname: city,
                    }
                }).then(result => {
                    var list = result.data.list
                    console.log(list)
                    for (var i = 0; i < list.length; i++) {
                        var temp = document.createElement('li')
                        temp.innerText = list[i]
                        document.querySelector('.showUl').appendChild(temp)
                        console.log(temp)
                    }
                })
            })
        })
    </script>
</head>

<body>
    <div class="condition">
        <span>省份</span>
        <span>城市</span>
        <form action="">
            <div class="province">
                <input type="text" class="provinceInput">
            </div>
            <div class="city">
                <input type="text" class="cityInput">
            </div>
            <button type="button" class="look">查询</button>
        </form>

    </div>
    <div class="show">
        <div>地区列表</div>
        <ul class="showUl">

        </ul>
    </div>
</body>

</html>